import { View, Text, ITouchEvent } from "@tarojs/components";
import './index.scss'
import '../../images/public/style.css'

interface LgCellProps {
    type: "A" | "B1" | "B2" | "C" | "D",
    title: string,
    describe?: string,
    content?: string,
    showIcon?: boolean,
    iconClass?: string,
    onClick?: (event: ITouchEvent) => void,
    children?: React.ReactNode, //仅提供给TypeD使用
    className?: string
}

export default function LgCell(props: LgCellProps) {
    switch (props.type) {
        case 'A':
            return (
                <LgCellTypeA {...props} ></LgCellTypeA>
            )
        case 'B1':
        case 'B2':
            return (
                <LgCellTypeB onClick={props.onClick} type={props.type} title={props.title} describe={props.describe ? props.describe : ""} content={props.content ? props.content : ""} ></LgCellTypeB>
            )
        case "C":
            return (
                <LgCellTypeC onClick={props.onClick} title={props.title} content={props.content ? props.content : ""}></LgCellTypeC>
            )
        case "D":
            return (
                <LgCellTypeD {...props}></LgCellTypeD>
            )
        default:
            return (
                <LgCellTypeA {...props} ></LgCellTypeA>
            )
    }
}

function LgCellTypeA(props: LgCellProps) {
    //设置默认图标
    const iconClass = props.iconClass ? props.iconClass : "icon-b01901"

    return (
        <LgCellTypeD title={props.title} onClick={props.onClick} className={props.className}>
            {
                props.content ? <Text className="content ">{props.content}</Text> : ""
            }
            {
                props.showIcon ? <Text className={iconClass + " icon"}></Text> : ""
            }
        </LgCellTypeD>
    )
}

interface LgCellTypeBProps {
    type: string
    title: string,
    describe: string,
    content: string,
    className?: string,
    onClick?: (event: ITouchEvent) => void
}

function LgCellTypeB(props: LgCellTypeBProps) {

    const classNames = new Array<string>();
    classNames.push("lg-cell-b-model")
    classNames.push(props.type)
    if (props.className) {
        classNames.push(props.className)
    }
    if (props.onClick) {
        classNames.push("click-class")
    }

    const className = classNames.join(" ")


    const onClick = (event: ITouchEvent) => {
        if (props.onClick) {
            props.onClick(event)
        }
    }

    return (
        <View className={className} onClick={onClick}>
            <View className="title-top">
                <View className="title-wrapper">
                    <Text className="title">{props.title}</Text>
                    {
                        props.type == "B1" ? (
                            <View className="content-right">
                                <Text className="content">{props.content}</Text>
                            </View>
                        ) : ""
                    }
                </View>
                <Text className="describe">{props.describe}</Text>
                {
                    props.type === "B2" ? (
                        <Text className="content">{props.content}</Text>
                    ) : ""
                }
            </View>
        </View>
    )
}

interface LgCellTypeCProps {
    title: string,
    content: string,
    className?: string,
    onClick?: (event: ITouchEvent) => void
}

function LgCellTypeC(props: LgCellTypeCProps) {
    const classNames = new Array<string>();
    classNames.push("lg-cell-c-model")
    if (props.className) {
        classNames.push(props.className)
    }

    const className = classNames.join(" ")

    const onClick = (event: ITouchEvent) => {
        if (props.onClick) {
            props.onClick(event)
        }
    }

    return (
        <View className={className} onClick={onClick}>
            <LgCellTypeD title={props.title}>
                <Text className="content ">{props.content}</Text>
            </LgCellTypeD>
        </View>
    )
}

//D款不写demo，主要提供组件内部调用
interface LgCellTypeDProps {
    title: string,
    onClick?: (event: ITouchEvent) => void,
    children?: React.ReactNode,
    className?: string
}

function LgCellTypeD(props: LgCellTypeDProps) {

    //设置默认点击事件
    const onclick = (event: ITouchEvent) => {
        if (props.onClick) {
            props.onClick(event)
        }
    }

    const classNames = new Array<string>();
    classNames.push("lg-cell-common")
    if (props.className) {
        classNames.push(props.className)
    }
    if (props.onClick) {
        classNames.push("click-class")
    }

    const className = classNames.join(" ")

    return (
        <View className={className} onClick={onclick}>
            <Text className="title">{props.title}</Text>
            <View className="right" >
                {props.children}
            </View>
        </View>
    )
}